{% load sentry_assets %}

<div style="padding: 20px; border-bottom: 1px solid #ddd; background: #fff; margin-bottom: 20px;">
  <div style="width: 600; margin: 0 auto; display: flex;">
    {% if preview.subject %}<h1>{{ preview.subject }}</h1>{% endif %}
    <label for="event" style="margin-right: 10px">Selection:</label>
    <select id="event" style="width: 200px; margin-right: 20px;">
      <option></option>
      <optgroup label="Activity">
        <option value="mail/assigned/">Assigned</option>
        <option value="mail/assigned/self/">Assigned (Self)</option>
        <option value="mail/assigned/team/">Assigned (Team)</option>
        <option value="mail/note/">Note</option>
        <option value="mail/new-release/">Release</option>
        <option value="mail/regression/">Regression</option>
        <option value="mail/regression/release/">Regression (w/ Release)</option>
        <option value="mail/resolved/">Resolved</option>
        <option value="mail/resolved-in-release/">Resolved In Release</option>
        <option value="mail/resolved-in-release/upcoming/">Resolved In Release (Upcoming)</option>
        <option value="mail/unassigned/">Unassigned</option>
        <option value="mail/new-user-feedback/">New User Feedback</option>
      </optgroup>
      <optgroup label="Alerts">
        <option value="mail/error-alert/">Error Alert</option>
        <option value="mail/performance-alert/transaction-n-plus-one">N+1 Database Query Alert</option>
        <option value="mail/performance-alert/transaction-n-plus-one-api-call">N+1 API Call Alert</option>
        <option value="mail/performance-alert/transaction-slow-db-query">Slow DB Query</option>
        <option value="mail/performance-alert/transaction-render-blocking-asset">Render Blocking Asset Alert</option>
        <option value="mail/generic-alert/">Generic Alert</option>
        <option value="mail/digest/">Digest</option>
        <option value="mail/incident-trigger">Metric Alert Trigger</option>
      </optgroup>
      <optgroup label="Account">
        <option value="mail/confirm-email/">Confirm Email</option>
        <option value="mail/recover-account/">Reset Password</option>
        <option value="mail/invalid-identity/">Invalid Identity</option>
        <option value="mail/sso-linked/">SSO Linked</option>
        <option value="mail/sso-unlinked/">SSO Unlinked</option>
        <option value="mail/sso-unlinked/no-password">SSO Unlinked (No Password)</option>
      </optgroup>
      <optgroup label="Crons">
        <option value="mail/cron-broken-monitor-email/">Broken Cron Monitor</option>
        <option value="mail/cron-muted-monitor-email/">Muted Cron Monitor</option>
      </optgroup>
      <optgroup label="Uptime">
        <option value="mail/uptime-auto-detected-monitor-email/">Auto-Detected Uptime Monitor</option>
      </optgroup>
      <optgroup label="Charts">
        <option value="charts/metric-alert-charts/">Metric Alert Charts</option>
        <option value="charts/chart-renderer/">Discover Charts</option>
      </optgroup>
      <optgroup label="Releases">
        <option value="mail/unable-to-fetch-commits/">Unable to Fetch Commits</option>
      </optgroup>
      <optgroup label="Membership">
        <option value="mail/request-access/">Access Requested</option>
        <option value="mail/access-approved/">Access Approved</option>
        <option value="mail/invitation/">Membership Invite</option>
        <option value="mail/invite-request/">Invite Request</option>
        <option value="mail/integration-request/">Integration Request</option>
        <option value="mail/notify-disable/">Notify Disable</option>
        <option value="mail/sentry-app-notify-disable/">Sentry App Notify Disable</option>
        <option value="mail/join-request/">Join Request</option>
      </optgroup>
      <optgroup label="Relocation">
        <option value="mail/relocate-account/">Relocate Account</option>
        <option value="mail/relocation-started/">Relocation Started</option>
        <option value="mail/relocation-succeeded/">Relocation Succeeded</option>
        <option value="mail/relocation-failed/">Relocation Failed</option>
      </optgroup>
      <optgroup label="Reports">
        <option value="mail/weekly-reports/">Weekly Report</option>
      </optgroup>
      <optgroup label="Repository">
        <option value="mail/unable-to-delete-repo/">Unable to Delete Repo</option>
      </optgroup>
      <optgroup label="Security">
        <option value="mail/mfa-added/">MFA Added</option>
        <option value="mail/mfa-removed/">MFA Removed</option>
        <option value="mail/password-changed/">Password Changed</option>
      </optgroup>
    </select>

    <label for="format" style="margin-right: 10px">Format:</label>
    <select id="format" style="width: 100px">
      <option value="html">HTML</option>
      <option value="txt" {% if format == 'txt' %} selected="selected"{% endif %}>Plaintext</option>
    </select>
    <form action="" method="post" style="margin-left: auto; margin-block-end: 0;">
      <button type="submit">Send</button>
    </form>
  </div>
</div>

{% script type="text/javascript" %}
<script>
function selectEmail(e) {
  var value = e.target.value;
  window.location.href = '/debug/' + value;
}

function selectFormat(e) {
  var value = e.target.value;
  window.location.href = window.location.pathname + '?format=' + value;
}

var eventSelect = document.getElementById('event');
eventSelect.addEventListener('change', selectEmail);

var formatSelect = document.getElementById('format');
formatSelect.addEventListener('change', selectFormat);
</script>
{% endscript %}

<div id="preview">
  {% if format == 'txt' %}
    <pre>{{ preview.text_body|safe }}</pre>
  {% else %}
    {{ preview.html_body|safe }}
  {% endif %}
</div>
